

  <title>轮播</title>

  <style>
  /* 为了区分效果 */
  #LAY-demo-carousel div[carousel-item]>*{text-align: center; line-height: 280px; color: #666;}
  #LAY-demo-carousel div[carousel-item]>*:nth-child(2n){background-color: #E2E2E2;}
  #LAY-demo-carousel div[carousel-item]>*:nth-child(2n+1){background-color: #eee;}
  #test-carousel-normal-2 div[carousel-item]>*{line-height: 120px;}
  </style>

  <div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
      <a lay-href="">商品管理</a>
      <a><cite>主页轮播图</cite></a>
    </div>
  </div>
  
  <div class="layui-fluid" id="LAY-demo-carousel">
    <div class="layui-row layui-col-space15">
      
      <div class="layui-upload">
        <button type="button" class="layui-btn" id="test2">多图片上传</button> 
        <button type="button"  lay-submit lay-filter="delRoation" class="layui-btn layui-btn-danger">删除轮播图</button>
        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
          预览图：
          <div class="layui-upload-list" id="demo2"></div>
       </blockquote>
      </div>
      
      
      <!-- <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-header">填充轮播元素 - 以图片为例</div>
          <div class="layui-card-body">
            <div class="layui-carousel" id="test-carousel-img">
              <div carousel-item="" id="rotaion">
                <div><img src="http://qiniuyun.bblog.site/anmo.jpg"></div>
                <div><img src="http://qiniuyun.bblog.site/anmo.jpg"></div>
                <div><img src="http://qiniuyun.bblog.site/anmo.jpg"></div>
                <div><img src="http://qiniuyun.bblog.site/anmo.jpg"></div>
                <div><img src="http://qiniuyun.bblog.site/anmo.jpg"></div>
                <div><img src="http://qiniuyun.bblog.site/anmo.jpg"></div>
            </div>
            </div>
          </div>
        </div>
      </div>  -->
      
      <div class="layui-upload-list"  id="rotaion1">
    </div>
      
      
    </div>
  </div>
  <!-- <script src="../../../ueditor1_4_3_3/third-party/jquery-1.10.2.js"></script> -->
  <script>
    
  layui.use(['admin', 'carousel', 'upload','form'], function(){
    var carousel = layui.carousel
    var $ = layui.$
    ,form = layui.form
    ,upload = layui.upload
    ,setter = layui.setter

    
    form.on('submit(delRoation)', function(obj){
      $.ajax({
        url: setter.myurl + "/admin/delRoation",
        data: JSON.stringify({}),
        type: "POST",
        dataType: "json",
        contentType: "application/json",
        headers: {
          'token': layui.data('layuiAdmin').token
        },
        success: function(data){
          if(data.code == 0){
            console.log(data);
          }else{
            layer.msg(data.message);
          }
        }
      });
    })
    

    //多图片上传
    upload.render({
      elem: '#test2'
      ,url: setter.myurl + "/admin/zhuPic"
      ,multiple: true
      ,before: function(obj){
        //预读本地文件示例，不支持ie8
        obj.preview(function(index, file, result){
          $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" width=150px height=150px class="layui-upload-img">')
        });
      }
      ,done: function(res){
        //上传完毕
        console.log("上传完毕")
      }
    });

    
  
    //常规轮播
    carousel.render({
      elem: '#test-carousel-normal'
      ,arrow: 'always'
    });

    $.ajax({
      url: setter.myurl + "/admin/rotationList",
      data: JSON.stringify({}),
      type: "POST",
      dataType: "json",
      contentType: "application/json",
      headers: {
        'token': layui.data('layuiAdmin').token
      },
      success: function(data){
        if(data.code == 0){
          data.data.forEach(element => {
            // $('#rotaion').append('<div><img src="'+element.picUrl+'"></div>')
            $('#rotaion1').append('<img src="'+ element.picUrl +'" alt="" width=150px height=150px style="margin-left:20px;" class="layui-upload-img">')
            console.log(element.picUrl);
          });
          console.log(data);
        }else{
          layer.msg(data.message);
        }
      }
    });
    
    //改变下时间间隔、动画类型、高度
    carousel.render({
      elem: '#test-carousel-normal-2'
      ,interval: 1800
      ,anim: 'fade'
      ,height: '120px'
    });
    
    //设定各种参数
    var ins3 = carousel.render({
      elem: '#test-carousel-demo'
    });
    //图片轮播
    carousel.render({
      elem: '#test-carousel-img'
      ,width: '778px'
      ,height: '440px'
      ,interval: 5000
    });
    
    //事件
    carousel.on('change(test-carousel-demo)', function(res){
      console.log(res)
    });
    
    var $ = layui.$, active = {
      set: function(othis){
        var THIS = 'layui-bg-normal'
        ,key = othis.data('key')
        ,options = {};
        
        othis.css('background-color', '#5FB878').siblings().removeAttr('style'); 
        options[key] = othis.data('value');
        ins3.reload(options);
      }
    };
    
    //监听开关
    form.on('switch(test-carousel-autoplay)', function(){
      ins3.reload({
        autoplay: this.checked
      });
    });
    
    $('.test-carousel-demoSet').on('keyup', function(){
      var value = this.value
      ,options = {};
      if(!/^\d+$/.test(value)) return;
      
      options[this.name] = value;
      ins3.reload(options);
    });
    
    //其它示例
    $('.test-carousel-demoTest .layui-btn').on('click', function(){
      var othis = $(this), type = othis.data('type');
      active[type] ? active[type].call(this, othis) : '';
    });
  
  });
  </script>